<template>
  <div @click="removeFocus">
    <h2 class="tooltips-title">{{ data.roomName }}</h2>
    <p>{{ data.roomAddress }}</p>
    <div class="tooltips-flex flex">
      <div v-if="data.roomType != 3" class="flex-wrap-2">
        <h2 class="tooltips-title">房源信息</h2>
        <p>商户：</p>
        <p>
          户型：{{ `${data.roomTing}厅 ${data.roomChu}厨 ${data.roomWei}卫` }}
        </p>
        <p>面积：{{ `${data.roomAreas}㎡` }}</p>
        <p>装修：{{ list.renovationName }}</p>
        <p>朝向：{{ list.orientationName }}</p>
        <p>类型：{{ list.roomTypeName }}</p>
      </div>
      <div v-if="data.roomType == 3" class="flex-wrap-2">
        <h2 class="tooltips-title">房源信息</h2>
        <p>类型：{{ list.roomTypeName }}</p>
      </div>
      <div class="flex-wrap-1">
        <el-button
          @click="gotoContract(data, 'add')"
          v-if="data.leaseStatus == 0 && data.deviceList"
          class="tools-button"
          type="text"
          >发起合约</el-button
        >
        <el-button
          @click="gotoDeviceList(data)"
          class="tools-button"
          type="text"
          >设备管理</el-button
        >
        <el-button
          @click="gotoEditContract(data)"
          v-if="data.leaseStatus == 1"
          class="tools-button"
          type="text"
          >查看合约</el-button
        >
        <el-button
          @click="terminate(data)"
          v-if="data.leaseStatus == 1"
          class="tools-button"
          type="text"
          >终止合约</el-button
        >
        <el-button
          v-if="data.leaseStatus == 0"
          @click="updataRoom(data)"
          class="tools-button"
          type="text"
          >修改房源</el-button
        >
        <el-button
          v-if="data.leaseStatus == 0"
          @click="remove(data)"
          class="tools-button"
          type="text"
          >删除房源</el-button
        >
        <el-button
          @click="gotoCheckCost(data)"
          v-if="data.leaseStatus == 1"
          class="tools-button"
          type="text"
          >查看费用</el-button
        >
      </div>
    </div>
    <div class="tooltips-flex overflow">
      <h2 class="tooltips-title">合同信息</h2>
      <div class="tools-user-item left">
        <p>租客：{{ data.memberName }}</p>
        <p>电话：{{ data.memberMobile }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { remove } from "@/api/meter/room";
import { terminate } from "@/api/contract/share";
export default {
  name: "tooltips",
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      obj: {},
    };
  },
  created() {},
  computed: {
    list() {
      let obj = this.data;
      if (obj.renovation == 1) {
        obj.renovationName = "简单装修";
      } else if (obj.renovation == 2) {
        obj.renovationName = "精装修";
      }

      if (obj.roomType == 1) {
        obj.roomTypeName = "普通住宅";
      } else if (obj.roomType == 2) {
        obj.roomTypeName = "公寓";
      } else if (obj.roomType == 3) {
        obj.roomTypeName = "工/商业区";
      }

      if (obj.orientation == 1) {
        obj.orientationName = "东";
      } else if (obj.orientation == 2) {
        obj.orientationName = "西";
      } else if (obj.orientation == 3) {
        obj.orientationName = "南";
      } else if (obj.orientation == 4) {
        obj.orientationName = "北";
      }
      return obj;
    },
  },
  methods: {
    removeFocus() {
      document.querySelector("body").click();
    },
    terminate(data) {
      this.$confirm("确定终止合约?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        terminate(data.contractId).then((res) => {
          this.$notify({
            message: res.data.msg,
            type: "success",
          });
          this.$emit("refresh", true);
        });
      });
    },
    // 查看修改合约
    gotoEditContract(data) {
      this.$router.push({
        path: "/contract/shareEditor",
        query: {
          communityId: data.communityId,
          roomid: data.id,
          contractId: data.contractId,
        },
      });
    },
    // 发起合约
    gotoContract(data, type) {
      this.$router.push({
        path: "/contract/share",
        query: {
          communityId: data.communityId,
          roomid: data.id,
          type: type,
        },
      });
    },
    updataRoom(data) {
      this.$router.push({
        path: "/room/centralized",
        query: {
          id: data.id,
        },
      });
    },
    gotoCheckCost(data) {
      console.log(data);
      this.$router.push({
        path: "/room/checkCost",
        query: {
          accountId: data.accountId,
          id: data.id,
          data: data,
        },
      });
    },
    remove(val) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        remove(val.id).then((res) => {
          this.$notify({
            message: res.data.msg,
            type: "success",
          });
          this.$emit("refresh", true);
        });
      });
    },
    gotoDeviceList(data) {
      if (data.deviceList) {
        this.$router.push({
          path: "/device/index",
          query: {
            id: data.deviceList[0]["id"],
          },
        });
      } else {
        this.$notify({
          title: "提示",
          message: "当前房间无设备",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tooltips-title {
  font-size: 14px;
}
.tools-button {
  display: block;
  color: #04a568;
  margin-left: 10px;
}
.tools-user-item {
  width: 50%;
}
</style>
